forum

home / developersection / forums / how to make six star with, five star css?

Ask Question
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Follow
Can you answer this question?
Answer

1 Answers

Ravi Vishwakarma

Ravi Vishwakarma

15-Jul-2021

how to make six star with, five star CSS?

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <style type='text/css'>

        body{

            text-align:center;

            display: flex;

            flex-direction:column;

            justify-content: center;

            align-items: center;

        }

            body div {

                margin: 50px;

            }

      .star-five {

            position:relative;

            width:0px;

            height:0px;

            display:block;

            border-left:75px solid transparent;

            border-right:75px solid transparent;

            border-bottom:170px  solid blue;

        }

            .star-five::before {

                width:0px;

                height:0px;

                position:absolute;

                border-left:100px solid transparent;

                border-right:100px solid transparent;

                border-bottom:60px  solid blue;

                display: block;

                content: '';

                left: -100px;

                top:60px;

                transform:rotate(180deg);

            }

            .star-five::after {

                width:0px;

                height:0px;

                position:absolute;

                border-left:75px solid transparent;

                border-right:75px solid transparent;

                border-bottom:50px  solid white;

                display: block;

                content: '';

                left: -75px;

                top:120px;

            }

    </style>

    <title>Animation Demo</title>

</head>

<body>

    <div class='star-five'>  </div> Five Star <br />

</body>

</html>

how to make six star with, five star CSS?


<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <style type='text/css'>

        body{

            text-align:center;

            display: flex;

            flex-direction:column;

            justify-content: center;

            align-items: center;

        }

            body div {

                margin: 50px;

            }

.star-six {

            width: 0;

            height: 0;

            border-left: 50px solid transparent;

            border-right: 50px solid transparent;

            border-bottom: 100px solid pink;

            position: relative;

        }

            .star-six::after {

                width: 0;

                height: 0;

                border-left: 50px solid transparent;

                border-right: 50px solid transparent;

                border-top: 100px solid pink;

                position: absolute;

                content: '';

                top: 30px;

                left: -50px;

            }

    </style>

    <title>Animation Demo</title>

</head>

<body>

    <div class='star-six'>  </div> Six Star <br />

</body>

</html>


advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy